<template>
  <view class="box-give-list">
    <my-header title="选择要赠送的商品"></my-header>
    <my-content class="content" :default-padding-top="10">
      <view
        @click="selected(item, index)"
        class="box-item"
        v-for="(item, index) in orderData"
        :key="index"
        :style="{ backgroundImage: `url(https://www.dingxians.cn/upload/images/box/bg-box-${item.level_id}.png)` }"
      >
        <view class="time" style="visibility: hidden">{{ item.created_at }}</view>
        <view class="goods-info">
          <image class="goods-img" :src="item.blind_box_prize_image"></image>
          <view class="goods-content">
            <view class="goods-name">{{item.blind_box_prize_name}}</view>
            <view class="goods-price">
              ￥{{ item.price }}
              <!--              <text class="goods-num">X{{ item.num }}</text>-->
              <my-number-box :show="item.num > 1" v-model="item.num" :max="item.num" :min="1"></my-number-box>
            </view>
            <view class="goods-recovery-price">拒提价：{{ item.recovery_price }}</view>
            <!--            <view class="goods-tips" v-if="!item.expired && item.status === 1">
                          请在
                          <text class="box_tip_time">{{ item.expired_at }}</text>
                          前提货，过期将只能拒提
                        </view>-->
            <view class="goods-tips timeout" v-if="item.expired">
              <view>已超时无法提货商品</view>
            </view>
            <view class="goods-tips" v-if="item.status === 2">赠送时间：{{ item.give_at }}</view>
            <view class="goods-tips" v-if="item.status === 3">拒提时间：{{ item.exchange_at }}</view>
            <view class="goods-tips" v-if="item.status === 4">反悔时间：{{ item.back_at }}</view>
            <view class="goods-tips" v-if="item.status === 5">提货时间：{{ item.updated_at }}</view>
          </view>
        </view>
        <view class="goods-bottom">
          <view class="goods-title">{{ item.blind_box_name }} [{{ item.resource }}]</view>
          <view class="create-at">{{ item.created_at }}</view>
        </view>

        <image
          class="select"
          :src="'https://www.dingxians.cn/upload/images/common/' + (item.selected ? 'selected' : 'unselected') + '.png'"
        ></image>
      </view>
      <view style="visibility: hidden;">1</view>
      <!-- <view class="freight">
          <view class="freight_title">单次提货满3件及以上包邮（偏远地区除外）</view>
          <view class="freight_rule" @click="header('/pages/content/freight')">运费规则 > </view>
        </view> -->
      <view class="bottom">
        <view class="bottom_select" @click="allQuery()">
          <image class="bottom_select_icon" src="https://www.dingxians.cn/upload/images/common/unselected.png" v-if="!allSelected"></image>
          <image class="bottom_select_icon" src="https://www.dingxians.cn/upload/images/common/selected.png" v-if="allSelected"></image>
          <view style="font-size: 24rpx;">全选</view>
          <view class="bottom_box">
            <view class="bottom_text">
              <view>已选</view>
              <view class="bottom_text_num">{{ num }}</view>
              <view class="bottom_txt">件</view>
            </view>
            <view class="bottom_title">
              <view>可拒提：</view>
              <view class="total_recovery_price">{{ total_recovery_price }}</view>
              <image mode="widthFix" class="gold" src="https://www.dingxians.cn/upload/images/shop/money.png"></image>
            </view>
          </view>
        </view>

        <view class="exchange_btn btn-primary" v-if="num == 0 || giveStatus">确认赠送</view>
        <view class="exchange_btn btn-primary exchange" v-if="num > 0 && !giveStatus" @click="give()">确认赠送</view>
      </view>

      <uni-popup ref="popup" v-show="popStatus" :mask-click="false">
        <view class="pop_box">
<!--          <view class="pop_header">抽到不想要的商品？赠送给想要的好朋友吧</view>-->

          <view class="user_info">
            <view class="give_search_box">
              <input class="user_id" v-model="giveParams.user_id" placeholder="请输入用户id" />
              <view class="give_search" @click="searchUser()">搜索</view>
            </view>
            <view class="search_user" v-if="giveParams.avatar">
              <image class="search_user_avatar" :src="giveParams.avatar"></image>
              <view class="search_user_info">
                <view class="search_user_id">用户ID:{{ giveParams.user_id }}</view>
                <view>用户昵称:{{ giveParams.nickname }}</view>
              </view>
            </view>
          </view>
          <textarea v-model="giveParams.remark" class="give_remark" placeholder="赠礼留言"></textarea>

          <view class="give_tip">
            温馨提示：商品赠送后不可撤销
          </view>

          <view class="give_btn_group">
            <view class="give_btn give_cancel" @click="cancel()"></view>
            <view class="give_btn give_confirm" @click="giveSubmit()"></view>
          </view>
        </view>
      </uni-popup>
    </my-content>

  </view>
</template>

<script>
import api from '../../api/index.js'
import box from '@/mixins/box'

export default {
  mixins: [box],
  data() {
    return {
      orderData: [],
      id: '',
      allSelected: false,
      page: 1,
      lastPage: 1,
      popStatus: false,
      giveParams: {
        prize_id: '',
        user_id: '',
        remark: '',
        avatar: '',
        nickname: '',
        num: 1,
      },
      giveStatus: false,
      // 是否是福利屋商品
      type: 0,
    }
  },
  onLoad(option) {
    this.id = option.id
    this.type = +option.type
    this.getGoods(1)
  },
  onShow() {

  },

  onReachBottom() {
    if (this.page > this.lastPage) {
      this.show('已经到底了')
      return
    }
    this.getGoods(1)
  },

  computed: {
    // 选中的商品
    num() {
      let total_num = 0
      this.orderData.filter(item => {
        return item.selected === true
      }).forEach((item) => {
        total_num += item.num
      })
      return total_num
    },
    total_recovery_price() {
      var total = 0
      this.orderData.filter(item => {
        return item.selected === true
      }).forEach((item) => {
        total += (item.recovery_price * item.num)
      })
      return total.toFixed(2)
    },
    selected_id() {
      return this.orderData.filter(item => {
        return item.selected === true
      }).map(item => {
        return item.id + ":" + item.num
      }).join(',')
    },
    selected_id2() {
      return this.orderData.filter(item => {
        return item.selected === true
      }).map(item => {
        return item.id
      })
    },
  },
  methods: {
    searchUser() {
      uni.showLoading({
        title: '搜索用户~',
      })
      api.users.search(this.giveParams.user_id).then(res => {
        if (res.code === 200) {
          uni.hideLoading()
          this.giveParams.nickname = res.data.nickname
          this.giveParams.avatar = res.data.avatar
        }
      }).catch(error => {
        console.log(error)
      })
    },
    give() {
      this.popStatus = true
      this.$refs.popup.open('center')
    },
    refresh() {
      this.page = 1
      this.getGoods(2)
    },
    giveSubmit() {
      if (!this.giveParams.user_id) {
        this.show('请输入用户id')
        return
      }
      if (this.selected_id.length === 0) {
        this.show('请选中要赠送的商品')
        return
      }
      uni.showLoading({
        title: '赠送中~',
      })
      this.giveStatus = true
      let promise
      if (this.type === 1) {
        promise = api.welfareHouses.give({
          user_id: this.giveParams.user_id,
          id: this.selected_id2,
          remark: this.giveParams.remark,
        })
      } else if (this.type === 0) {
        promise = api.blindBoxOrderPrizes.give({
          user_id: this.giveParams.user_id, params: this.selected_id, remark: this.giveParams.remark,
        })
      } else if (this.type === 2) {
        promise = api.towers.give({
          user_id: this.giveParams.user_id, params: this.selected_id, remark: this.giveParams.remark,
        })
      } else if (this.type === 3) {
        promise = api.compounds.give({
          user_id: this.giveParams.user_id, params: this.selected_id, remark: this.giveParams.remark,
        })
      }
      promise.then(res => {
        uni.hideLoading()
        this.giveStatus = false
        if (res.code === 200) {
          this.show('赠送成功')
          this.cancel()
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    cancel() {
      this.$refs.popup.close()
      this.popStatus = false
    },
    splitNum(num) {
      // if (typeof(num) == 'number') {
      return num.toString().split('.')
      // }
      // return num.split('.')

    },
    allQuery() {
      this.allSelected = !this.allSelected
      for (let i = 0; i < this.orderData.length; i++) {
        this.orderData[i].selected = this.allSelected
        this.$set(this.orderData, i, this.orderData[i])
      }
    },
    selected(item, index) {
      item.selected = !item.selected
      this.$set(this.orderData, index, item)
    },
    getGoods(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      let promise
      if (this.type === 1) {
        promise = api.welfareHouses.giveShow({ page: this.page })
      } else if (this.type === 0) {
        promise = api.blindBoxOrderPrizes.giveShow({ page: this.page })
      } else if (this.type === 2) {
        promise = api.towers.giveShow({page: this.page})
      } else if (this.type === 3) {
        promise = api.compounds.giveShow({page: this.page})
      }
      promise.then(res => {
        if (res.code === 200) {
          uni.hideLoading()
          if (type === 1) {
            this.orderData = this.orderData.concat(res.data.data)
          } else if (type === 2) {
            this.orderData = res.data.data
          }
          this.lastPage = res.data.lastPage
          this.page++
        }
      }).catch(error => {
        console.log(error)
      })
    },

  },
}
</script>

<style lang="scss" scoped>
.box-give-list {
  min-height: 100vh;
  height: 100%;
  // background-color: #f7f7f7;
  background: #141414;
}

.content {

  .box-item {
    margin: 0 auto 0 auto;
    width: 710rpx;
    height: 460rpx;
    background-size: 100% 100%;
    color: white;
    box-sizing: border-box;
    padding: 50rpx 50rpx;
    position: relative;

    .create-at {
      font-size: 24rpx;
      text-align: right;
      margin-right: 20rpx;
    }

    .goods-img {
      width: 160rpx;
      height: 160rpx;
      margin-left: 31rpx;
      margin-top: 50rpx;
    }

    .goods-info {
      margin-top: 20rpx;
      display: flex;

      .goods-content {
        flex: 1;
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .goods-name {
          width: 400rpx;
          margin-top: 30rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 28rpx;
        }

        .goods-price {
          font-size: 40rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .goods-num {
            font-size: 24rpx;
          }
        }

        .goods-recovery-price {
          font-size: 22rpx;
        }

        .goods-tips {
          font-size: 22rpx;
        }

        .timeout {
          color: red;
        }
      }
    }

    .select {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      right: 60rpx;
      top: 60rpx;
    }

    .goods-bottom {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .goods-title {
        font-size: 24rpx;
        margin-left: 20rpx;
      }

      .goods-control {
        .action-btn {
          margin-right: 20rpx;
          width: 100rpx;
          height: 46rpx;
        }
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
    background-color: #141414;
    align-items: center;
    color: white;
    font-weight: bold;

    .bottom_select {
      display: flex;
      align-items: center;

      .bottom_select_icon {
        width: 32rpx;
        height: 32rpx;
        margin: 0 20rpx;
      }
    }

    .bottom_box {
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      font-weight: normal;
      margin-left: 70rpx;

      .bottom_text {
        display: flex;
        align-items: center;

        .bottom_text_num {
          margin: 0 10rpx;
          /* font-weight: bold; */
          font-size: 24rpx;
          color: #ee5093;
        }
      }

      .bottom_title {
        display: flex;
        align-items: center;

        .total_recovery_price {
          /* font-weight: bold; */
          font-size: 24rpx;
          color: #ee5093;
        }

        .gold {
          width: 30rpx;
          height: 30rpx;
          margin-left: 10rpx;
        }
      }
    }

    .exchange_btn {
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      width: 228rpx;
      margin: 0 20rpx;
      font-size: 24rpx;
      background-size: 100% 100%;
      filter: grayscale(1);

      &.exchange {
        filter: none;
        color: #fff;
      }
    }
  }

  .pop_box {
    display: flex;
    flex-direction: column;
    background-image: url('https://www.dingxians.cn/upload/images/box/bg-give.png');
    background-size: 100% 100%;
    border-radius: 10rpx;
    width: 655rpx;
    height: 780rpx;
    box-sizing: border-box;
    padding-top: 150rpx;

    .pop_header {
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      margin-top: 140rpx;
      color: white;
    }

    .user_info {
      display: flex;
      flex-direction: column;

      .give_search_box {
        display: flex;
        justify-content: center;
        font-size: 24rpx;
        margin: 0 auto;
        width: 542rpx;
        height: 80rpx;
        align-items: center;
        background-color: #141414;
        border: 1rpx solid #333122;
        border-radius: 2rpx;


        .user_id {
          flex: 1;
          border-radius: 10rpx;
          margin-right: 10rpx;
          padding: 0 24rpx;
          font-size: 24rpx;
          color: white;

          &::placeholder {
            color: #525252;
          }
        }

        .give_search {
          width: 112rpx;
          height: 52rpx;
          border-radius: 2rpx;
          background-color: #ee5093;
          margin-right: 12rpx;
          text-align: center;
          line-height: 52rpx;
          font-weight: bold;
          color: #141414;
        }
      }

      .search_user {
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20rpx 0 0;

        .search_user_avatar {
          border-radius: 50%;
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
        }

        .search_user_info {
          display: flex;
          height: 80rpx;
          flex-direction: column;
          justify-content: space-between;
          color: white;

          .search_user_id {
            color: red;
          }
        }
      }
    }

    .give_tip {
      margin: 20rpx 0;
      font-size: 24rpx;
      color: red;
      text-align: center;
    }

    .give_remark {
      margin: 20rpx auto 0;
      box-sizing: border-box;
      padding: 32rpx 24rpx;
      width: 542rpx;
      background: rgba(0,9,56,0.71);
      border-radius: 10rpx 10rpx 10rpx 10rpx;

      font-size: 24rpx;
      color: white;

      &::placeholder {
        color: #525252;
      }
    }

    .give_btn_group {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 30rpx 30rpx 30rpx;

      .give_btn {
        width: 228rpx;
        height: 84rpx;
        background-size: 100% 100%;
        text-align: center;
        line-height: 84rpx;
        font-size: 30rpx;
        color: #fff;

        &.give_cancel {
          filter: grayscale(1);
          background-image: url("https://www.dingxians.cn/upload/images/common/btn-cancel.png");
        }

        &.give_confirm {
          margin-left: 56rpx;
          background-image: url("https://www.dingxians.cn/upload/images/common/btn-confirm.png");
        }
      }

    }
  }
}
</style>